<!DOCTYPE html>
<html ng-app="menuApp" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <header th:replace="importCommon"></header>
    <link rel="stylesheet" th:href="@{/assets/jstree/themes/default/style.css}"/>
    <link rel="stylesheet" th:href="@{/css/menu.css}"/>
    <script th:src="@{/js/lib/angular/angular-sanitize.min.js}"></script>
    <script th:src="@{/js/common/customValid.js}"></script>
    <script th:src="@{/js/common/FormDirective.js}"></script>
    <script th:src="@{/js/system/controller/MenuCtrl.js}"></script>
    <script th:src="@{/js/system/service/MenuService.js}"></script>
    <script th:src="@{/assets/jstree/jstree.min.js}"></script>
    <script th:src="@{/assets/jstree/checkboxTree.js}" type="text/javascript"></script>
    <title>菜单管理</title>
    <style type="text/css">
        #menu-edit .add_menu tr {
            margin-bottom: 10px;
        }

        #menu-edit .add_menu td {
            line-height: 45px !important;
        }

        #select_type {
            padding-left: 37px;
            width: 114px;
            margin-left: 10px;
        }

        #editContent {
            padding: 8px 78px 24px;
        }
    </style>
</head>
<body ng-controller="menuCtrl">
<div class="page-content" style="height:100%;padding:0;">

    <div id="treeMenu" style="width:20%;float: left;border-right: 2px solid #ccc;">
        <div style="height: 40px;line-height: 40px;">
            <div style="text-align: center;background: #0679CC;color: white;">
                菜单管理
            </div>
            <div>
                <a href="javascript:void(0)" style="display: none;"></a>
                <a href="javascript:void(0)"></a>
            </div>
        </div>
        <div class="menu-tree" style="overflow:auto;">
            <div id="menuTree"></div>
        </div>
        <div id="menu-edit" style="display:none">
            <form name="form" method="post">
                <div class="win-content">
                    <!--<div id="editContent" class="page-content">-->
                    <div class="row">
                        <div class="col-md-2">菜单名称</div>
                        <div class="col-md-10">
                            <input name="menuName" type="text" ng-model="menu.name" class="addtext" value=""
                                   style="width: 300px" title="" ht-validate="{maxlength:100}"/>
                            <i style="color: #F60;">*</i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">是否显示</div>
                        <div class="col-md-10">
                            <label>
                                <input type="radio" class="ace radio" name="isShow" ng-model="menu.isShow"
                                       ng-checked="true" value="1"/>
                                <span class="lbl">是</span>
                            </label>
                            <label>
                                <input type="radio" class="ace radio" name="isShow" ng-model="menu.isShow"
                                       ng-checked="menu.isShow==0" value="0"/>
                                <span class="lbl">否</span>
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">URL地址</div>
                        <div class="col-md-10">
                            <input name="url" title="" type="text" ng-model="menu.url" value=""
                                   style="width: 300px" ht-validate="{required:false}"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">序号</div>
                        <div class="col-md-10">
                            <input name="sort" title="" type="text" ng-model="menu.sort" value=""
                                   style="width: 300px" ht-validate="{required:false}"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">icon</div>
                        <div class="col-md-10">
                            <input name="icon" title="" type="text" ng-model="menu.icon" value=""
                                   style="width: 200px" ht-validate="{string:false}"/>
                            <a href="http://www.bootcss.com/p/font-awesome/#icons-new" target="_blank"
                               style="text-decoration: none;" class="dropdown-toggle">查看图标</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">描述</div>
                        <div class="col-md-10">
                            <input name="remark" type="text" ng-model="menu.remark" value=""
                                   style="width: 300px" title=""/>
                        </div>
                    </div>
                    <!--</div>-->
                </div>
            </form>
            <div style="margin:0 50%;">
                <button type="button" class="btn btn-primary" ht-save="/menu/add" ng-model="menu">保存</button>
            </div>
        </div>
    </div>
    <div id="content" style="width: 80%;float: right;height: 100%;overflow: auto;">
        <div class="Res Manager_style">
            <div class="table_res_list">
                <table style="text-align: center;" id="Res_list" cellpadding="0" cellspacing="0"
                       class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th th:width="100">菜单名称</th>
                        <th th:width="100">上级菜单</th>
                        <th th:width="100">菜单类型</th>
                        <th th:width="100">是否显示</th>
                        <th>URL地址</th>
                        <th th:width="50">序号</th>
                        <th th:width="150">创建日期</th>
                        <th th:width="150">最后更新日期</th>
                        <th>描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="detail in menus">
                        <td class="atxt_name" ng-bind="detail.name"></td>
                        <td class="atxt_name" ng-bind="detail.parentName"></td>
                        <td class="atxt_name text-center">
                            <span ng-class="{true:'label label-sm label-warning arrowed arrowed-right',false:'label label-sm label-success arrowed arrowed-in'}[detail.type==0]"
                                  ng-bind="detail.type==0 ? '菜单':'按钮'"></span>
                        </td>
                        <td class="text-center" ng-bind="detail.isShow==1? '是':'否'"></td>
                        <td class="dt-grid-cell hidden-xs hidden-sm" ng-bind="detail.url"></td>
                        <td class="text-center" ng-bind="detail.sort"></td>
                        <td class="text-center" ng-bind="detail.createAt | date:'yyyy-MM-dd HH:mm:ss'"></td>
                        <td class="text-center" ng-bind="detail.updateAt | date:'yyyy-MM-dd HH:mm:ss'"></td>
                        <td ng-bind="detail.description"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var layerIndex, jstree, currentNode;
    window.onresize = function () {
        $('#treeMenu').css({height: window.innerHeight});
        $('#treeMenu .menu-tree').css({height: (window.innerHeight - 40)});
    };
    (function () {
        $('#treeMenu').css({height: window.innerHeight});
        $('#treeMenu .menu-tree').css({height: (window.innerHeight - 40)});
        jstree = $('#menuTree').jstree({
            "core": {
                "animation": 0,
                "check_callback": true,
                "themes": {"stripes": true},
                "data": {
                    "url": function (node) {
                        return _ctx + "/menu/getTree";
                    },
                    "data": function (node) {
                        return {"id": node.id};
                    }
                }
            },
            "types": {
                "file": {
                    "icon": "glyphicon glyphicon-file",
                    "valid_children": []
                }
            },
            "plugins": ["contextmenu", "types"],
            "contextmenu": {
                "items": {
                    "create": null,
                    "rename": null,
                    "remove": null,
                    "ccp": null,
                    "editMenu": {
                        "label": "编辑",
                        "action": function (data) {
                            openMenuEdit("edit", getSelectItem(data).id);
                        }
                    },
                    "addMenu": {
                        "label": "添加同级菜单",
                        "action": function (data) {
                            openMenuEdit("add", getSelectItem(data).parent);
                        }
                    },
                    "addSubMenu": {
                        "label": "添加子菜单",
                        "_disabled": function (data) {
                            var selectData = getSelectItem(data);
                            return selectData.original.type === 'file';
                        },
                        "action": function (data) {
                            var selectData = getSelectItem(data);
                            openMenuEdit("add", selectData.id);
                        }
                    },
                    "moveMenu": {
                        "label": "移动菜单",
                        "action": function (data) {
                            layer.alert("正在开发中......");
                        }
                    },
                    "delMenu": {
                        "separator_before": true,
                        "label": "删除菜单",
                        "action": function (data) {
                            AngularUtil.triggerScopeFun("deleteByMenuId", getSelectItem(data).id);
                        }
                    }
                }
            }
        });
        function getSelectItem(data) {
            var inst = $.jstree.reference(data.reference);
            var obj = inst.get_node(data.reference);
            currentNode = obj;
            return currentNode;
        };

        $('#menuTree').bind("loaded.jstree", function (e, data) {
            data.instance.open_all(0); // -1 opens all nodes in the Container
        });

        $('#menuTree').bind("activate_node.jstree", function (obj, e) {
            var menuId = e.node.id;
            if (menuId) {
                AngularUtil.triggerScopeFun("getParentByMenuId", menuId);
            }
        });

        $('#menuTree').bind("show_contextmenu.jstree", function (obj, e) {
            // 如果是按钮级别的菜单， 隐藏
            if (e.node.original.type) {
                $(".vakata-contextmenu-disabled").hide();
            }
        });
        function openMenuEdit(action, id) {
            var title = action == "edit" ? "编辑" : "添加";
            var scope = AngularUtil.getScope();
            scope.menu = {};
            if (action == "edit") {
                AngularUtil.triggerScopeFun("getByMenuId", id);
            }
            // 添加菜单
            if (action == "add") {
                scope.menu.parentId = id;
                scope.menu.type = "0";
                scope.menu.isShow = 1;
            }
            AngularUtil.setData(scope);
            layerIndex = layer.open({
                type: 1,
                title: title,
                shadeClose: true, //点击遮罩关闭层
                area: ['550px', '440px'],
                content: $('#menu-edit')
            });
        }

    })();
</script>
</html>


